import React, { useState } from 'react';
import './styles.css';
import AdvancedCounter from './components/AdvancedCounter';
import SimpleTodo from './components/SimpleTodo';

function Demo2() {
  // 用于切换显示计数器或Todo应用
  const [activeTab, setActiveTab] = useState('counter');
  
  return (
    <div className="demo2-container">
      <h1 className="demo2-title">React 小练习 Demo</h1>
      
      <div className="demo2-tabs">
        <button 
          className={`demo2-tab ${activeTab === 'counter' ? 'active' : ''}`}
          onClick={() => setActiveTab('counter')}
        >
          计数器
        </button>
        <button 
          className={`demo2-tab ${activeTab === 'todo' ? 'active' : ''}`}
          onClick={() => setActiveTab('todo')}
        >
          Todo 应用
        </button>
      </div>
      
      <div className="demo2-content">
        {activeTab === 'counter' ? (
          <section className="demo2-section">
            <h2>高级计数器</h2>
            <p className="demo2-description">
              使用 useState 钩子管理状态，实现增加、减少、重置功能，以及自定义步长和历史记录。
            </p>
            <div className="demo2-example">
              <AdvancedCounter />
            </div>
          </section>
        ) : (
          <section className="demo2-section">
            <h2>简易 Todo 应用</h2>
            <p className="demo2-description">
              使用 useState 管理 Todo 列表，实现添加、删除、标记完成功能。
            </p>
            <div className="demo2-example">
              <SimpleTodo />
            </div>
          </section>
        )}
      </div>
    </div>
  );
}

export default Demo2; 